<template>
  <div class="mob-ec-box-card" v-if="useLocale.isMob"></div>
  <div v-else class="box-card" shadow="hover">
    <div class="search-con flex justify-between flex-wrap">
      <el-space wrap :size="10" class="mt-1">
        <el-input
          v-model="params.keyword"
          style="width: 150px"
          placeholder="关键字"
        />
        <el-input
          v-model="params.fb_name"
          style="width: 150px"
          placeholder="标组名称"
        />
        <el-button :icon="Search" plain @click="search">查詢</el-button>
      </el-space>
      <el-space wrap :size="10" class="mt-1">
        <el-button type="danger" plain>删除</el-button>
        <el-button type="info" plain>下载</el-button>
        <el-dropdown>
          <el-button type="primary" plain>
            新增<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>新增商品</el-dropdown-item>
              <el-dropdown-item>选择商品</el-dropdown-item>
              <el-dropdown-item>选择优惠券</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-space>
    </div>
    <div class="px-15">
      
      
      <!-- <div class="more" v-if="total > params.page_size">
        <el-button link :loading="moreLoading" type="primary"
          >点击加载更多</el-button
        >
      </div> -->
    </div>

    <div class="list mx-15">
      <ul class="head">
        <li style="width: 55px">check</li>
        <li style="width: 90px">排序</li>
        <li style="width: 100px">关键字</li>
        <li style="width: 100px">标组名称</li>
        <li style="width:150px">
          <el-space :size="0" :spacer="spacer">
            <span>库存</span>
            <span>价格</span>
            <span>进货价格</span>
          </el-space>
        </li>
        <li style="width: 100px">状态</li>
        <li style="width: 140px">
         操作
        </li>
      </ul>
      <el-scrollbar ref="scrollbarRef" class="scroll">
        <div class="dragTable">
        <ul class="content dragrow" v-for="(item, index) in tableData">
          <li style="width: 55px"><div class="cell">check</div></li>
          <li style="width: 90px">
            <div class="cell flex align-center">
              <el-link
                v-if="item.status != 2"
                :underline="false"
                type="primary"
              >
                <nut-icon
                  font-class-name="iconfont"
                  class-prefix="icon"
                  size="16"
                  name="zhiding"
                ></nut-icon>
              </el-link>
              <span class="px">{{ Number(item.group_sort) + 1 }} </span>
              <el-link
                v-if="item.status != 2"
                :underline="false"
                type="primary"
                class="drag-handler"
                ><el-icon size="14"><Sort /></el-icon
              ></el-link>
            </div>
          </li>
          <li style="width: 100px">
            <div class="cell">
              {{ item.group_key }}
            </div>
          </li>
          <li style="width: 100px">
            <div class="cell">
              {{ item.group_name }}
            </div>
          </li>
          <li style="width:150px">
            <div class="cell">
              <el-space :size="0" :spacer="spacer">
                <span>{{ item.group_stock }}</span>
                <span>{{ item.price }}</span>
                <span>{{ item.purchase_price }}</span>
              </el-space>
            </div>
          </li>
          <li style="width: 100px">
            <div class="cell">
              <div v-if="item.status == 2">
              <div class="text-tips-color">{{ item.status_name }}</div>
              <div class="text-light-color font-sm" v-if="item.stop_budan==1">已停止补单</div>
            </div>
            <span v-else :class="{'primaryColor': item.status == 1}"> {{item.status_name }}</span>            
            </div>
          </li>
          <li style="width: 140px">
            <div class="cell">
              <el-space :size="3">
                <el-button link type="info">
                  <el-icon size="18"><Edit /></el-icon>
                </el-button>
                <el-button v-if="item.status == 0" link type="danger">
                  <el-icon size="18"><Delete /></el-icon>
                </el-button>

                <el-button link type="primary">
                  <nut-icon
                    font-class-name="iconfont"
                    class-prefix="icon"
                    size="19"
                    name="qb"
                  ></nut-icon>
                </el-button>
                <el-button
                  v-if="item.status != 0 && item.stop_budan == 0"
                  link
                  type="warning"
                >
                  <el-icon size="19"><VideoPause /></el-icon>
                </el-button>
                <el-button v-if="item.status != 0" link>
                  <nut-icon
                    font-class-name="iconfont"
                    class-prefix="icon"
                    size="19"
                    name="editprice"
                  ></nut-icon>
                </el-button>
              </el-space>
            </div>
          </li>
        </ul>
        </div>
      </el-scrollbar>
      <div v-if="total > params.page_size" class="mt-2 flex justify-center">
        <el-pagination
          v-model:current-page="params.current_page"
          v-model:page-size="params.page_size"
          :page-sizes="[500, 1000]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick, inject, computed, h } from "vue";
import { $getEmall, $postEmall } from "@api/setting";
import {
  Search,
  ArrowDown,
  Sort,
  Top,
  Edit,
  Delete,
  VideoPause,
} from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import { useCommonStore } from "@/store/common";
import { useI18n } from "vue-i18n";
import { $getGroupList } from "@api/live";
import Sortable from "sortablejs";
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
const reload = inject("reload");

const { t } = useI18n();
const langkey = computed(() => useLocale.locale);
let currids = ref([]); //选择的行id
let params = ref({
  group_key: "",
  group_name: "",
  sortby: "", //排序
  current_page: 1,
  page_size: 500,
});
const total = ref(0);
const tableData = ref([]);
const dragTable = ref(null);
const spacer = h(ElDivider, { direction: "vertical" });
onMounted(() => {
  getData();
  nextTick(() => {
    initSortable1();
  });
});
const getData = async () => {
  currids.value = [];
  let res = await $getGroupList(params.value);
  console.log(res);
  if (res.code == 0) {
    if (useLocale.isMob) {
      res.data.table.forEach((ele) => {
        Reflect.set(ele, "checked", false);
      });
    }
    tableData.value = res.data.table;
    total.value = res.data.total;
    if (useLocale.isMob) {
      nextTick(() => {
        scrollbarRef.value.setScrollTop(0);
      });
    }
  }
};

const search = () => {
  getData();
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
};
const selectable = (row, index) => {
  if (row.status == 2) {
    return false;
  } else {
    return true;
  }
};
const handleSelectionChange = (val) => {
  currids.value = [];
  if (val.length !== 0) {
    val.forEach((ele) => {
      currids.value.push(ele.fb_user_id);
    });
  }
};
let sortableInstance: Sortable | null = null;
const initSortable1 = () => {
  nextTick(() => {
    const table = document.querySelector(".dragTable");
    //const table = dragTable.value
    // const table = document.querySelector('.reqtable .el-table__body-wrapper tbody') // 使用这种方法路由切换后再切换回来获取不到
    if (sortableInstance) {
      sortableInstance.destroy();
    }
    sortableInstance = new Sortable(table, {
      draggable: ".dragrow",

      onEnd: ({ newIndex, oldIndex }) => {
        console.log(newIndex);
        if (oldIndex !== newIndex)
          console.log(
            "拖动成功",
            `元素拖动前索引${oldIndex}---元素拖动后索引${newIndex}`
          );
      },
    });
  });
};
// const initSortable = () => {
//   const tbody = dragTable.value.$el.querySelector('.el-table__body-wrapper tbody')
//   console.log("tbody:"+tbody)
//   new Sortable(tbody, {
//    draggable: '.el-table__row',
//     animation: 150, // ms, number 单位：ms，定义排序动画的时间
//     onUpdate: function (item) {
//           // 拖拽更新节点位置发生该事件
//          console.log(item.oldIndex);
//         },
//     onEnd: async (evt) => {
//           console.log(evt.oldIndex);
//           console.log(evt.newIndex);
//           const itemToMove = tableData.value.splice(evt.oldIndex, 1)[0];
//           tableData.value.splice(evt.newIndex, 0, itemToMove);
//         },
//   })
// };
const setNodeSort = (oldIndex: any, newIndex: any) => {
  // 使用arr复制一份表格数组数据
  // const arr = xxx;
  // console.log(arr);
  // const currentRow = arr.splice(oldIndex, 1)[0]
  // arr.splice(newIndex, 0, currentRow )
  // // 原数组置空
  // xxx = [];
  // nextTick(async () => {
  // 	xxx = arr;
  // 	// 数据处理
  //   // ...
  // 	// 提交后后台数据进行排序
  //   // ...
  // });
};
</script>

<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 200px);
}
.box-card {
  .search-con {
    border-bottom: 1px solid #ededed;
    padding: 5px 5px 15px 15px;
  }
}
.list {
  color: var(--el-text-color-regular);
  .head {
    display: table-row;
    padding-top: 10px;
    padding-bottom: 12px;
    width: 100%;
    font-size: 14px;

    li {
      display: table-cell;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding: 0 8px;
      font-weight: 600;
      border-bottom: 1px solid #ebebeb;
    }
  }
  .content {
    display: table-row;
    width: 100%;
    font-size: 13px;
    // &:nth-child(even) {
    //   background-color: var(--el-fill-color-lighter); /* 双行交替色 */
    // }
    // &:hover {
    //   background-color: #f5f7fa;
    // }
    li {
      display: table-cell;
      padding: 8px 0;
      min-width: 0;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      z-index: var(--el-table-index);
      border-bottom: 1px solid #ebeef5;
      .cell {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding: 0 8px;
      }
    }
  }
  .more {
    text-align: center;
    font-size: 13px;
    padding: 10px;
    color: #606366;
  }
}
.primaryColor {
  color: var(--el-color-primary);
}
.more {
  text-align: center;
  font-size: 13px;
  padding: 10px;
  color: #606366;
}
</style>
